<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Edit</title>
</head>
<div th:fragment="editMeta-form" xmlns:th="http://www.thymeleaf.org" th:remove="tag">
    <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
        <form method="post" class="form-group" th:object="${entity}" id="entityMetaForm" th:action="@{/save}">
            <input type="hidden" th:field="*{id}" id="id">
            <div th:each="caption:${captions}" th:if="${!caption.hide&&caption.large}"
                 class="form-group">
                <label th:text="${caption.label}"></label>
                <textarea th:field="*{__${caption.name}__}" class="form-control input" id="editor"></textarea>
            </div>
            <div class="form-group">
                <button type="submit" class="form-control btn btn-primary btn-block" id="submit1">Save
                </button>
                <button type="reset" class="form-control btn btn-block" id="cancel1">Reset form</button>
            </div>
        </form>
    </div>
    <script th:inline="javascript">
        var getUrlParameter = function getUrlParameter(sParam) {
            var sPageURL = window.location.search.substring(1),
                sURLVariables = sPageURL.split('&'),
                sParameterName,
                i;

            for (i = 0; i < sURLVariables.length; i++) {
                sParameterName = sURLVariables[i].split('=');

                if (sParameterName[0] === sParam) {
                    return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
                }
            }
        };

        /*<![CDATA[*/
        $("#entityForm").submit(function (e) {
            e.preventDefault();

            $.ajax({
                url: $("#entityMetaForm").attr('action') + "?entityClass=" + getUrlParameter("entityClass") + "&id=" + $("#id").val(),
                type: 'post',
                data: $("#entityMetaForm").serializeArray(),
                success: function (response) {
                    $('#entities-list').html(response);
                }
            })
        });
        ClassicEditor
            .create(document.querySelector('#editor'))
            .catch(error => {
                console.error(error);
            });
        /*]]>*/
    </script>
</div>
</html>